<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <h3>用户总数</h3>
            <p class="stat-number">12,345</p>
            <el-progress :percentage="70" :stroke-width="8" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <h3>订单数量</h3>
            <p class="stat-number">1,234</p>
            <el-progress :percentage="50" :stroke-width="8" status="success" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <h3>收入统计</h3>
            <p class="stat-number">¥56,789</p>
            <el-progress :percentage="80" :stroke-width="8" status="warning" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <h3>访问量</h3>
            <p class="stat-number">98,765</p>
            <el-progress :percentage="90" :stroke-width="8" status="exception" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>数据图表</span>
            </div>
          </template>
          <div class="chart-container">
            <el-empty description="图表数据" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最新动态</span>
            </div>
          </template>
          <div class="activity-list">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const activities = ref([
  {
    content: '创建了新的订单 #12345',
    timestamp: '2025-09-10'
  },
  {
    content: '用户张三完成了注册',
    timestamp: '2025-09-09'
  },
  {
    content: '系统更新至v2.1.0版本',
    timestamp: '2025-09-08'
  },
  {
    content: '处理了用户反馈问题',
    timestamp: '2025-09-07'
  }
])
// 初始化
onMounted(() => {

})
</script>

<style scoped>
.dashboard {
  padding: 0px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #606266;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
  color: #303133;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-list {
  padding: 20px 0;
}
</style>